<template>
  <Model-bg
    title="能耗信息"
    :width="476"
    :height="355"
    :top="top"
    router="/srceen/consumption"
  >
    <div id="consumption" />
  </Model-bg>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
import { screenConsume } from "@/api/srceen/home";
export default {
  props: {
    top: {
      type: Number,
      default: 15,
    },
  },
  data() {
    return {
      xlist: [],
      dataList: [],
      colors: [
        ["#1890FF", "rgba(24,144,255,0.5)"],
        ["#FA18FF", "rgba(250,24,255,0.5)"],
        ["#F63F3F", "#F63F3F"],
        ["#FF9900", "#FF9900"],
      ],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取图表数据
    getList() {
      screenConsume().then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis || [];
          this.dataList = [
            {
              data: res.data.waterActual || [],
              name: "实际水耗",
              index: 0, // 0: 左侧 1: 右侧
            },
            {
              data: res.data.electricityActual || [],
              name: "实际电耗",
              index: 1,
            },
            {
              data: res.data.waterTarget || [],
              name: "目标水单耗",
              index: 0,
            },
            {
              data: res.data.electricityTarget || [],
              name: "目标电单耗",
              index: 1,
            },
          ];
          this.initChart();
        }
      });
    },
    // 初始化图表
    initChart() {
      let domid = document.getElementById("consumption");
      if (domid?.hasAttribute("_echarts_instance_"))
        domid.removeAttribute("_echarts_instance_");
      let myChart = this.$echarts.init(domid);
      let legData = [];
      let series = [];
      this.dataList.forEach((item, index) => {
        legData.push({
          name: item.name,
          // itemStyle: { opacity: index <= 1 ? 1 : 0 },
        });
        let itemObj = {
          data: item.data,
          type: index <= 1 ? "pictorialBar" : "line",
          yAxisIndex: item.index,
          name: item.name,
          barGap: "-70%",
          itemStyle: {
            color: () => {
              let colorItem = this.colors[index];
              return new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  { offset: 0, color: colorItem[0] },
                  { offset: 1, color: colorItem[1] },
                ],
                false
              );
            },
          },
        };
        if (index <= 1) {
          itemObj.symbol = "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z";
          itemObj.barCategoryGap = "-130%";
          itemObj.itemStyle = {
            opacity: 0.5,
          };
          itemObj.emphasis = {
            itemStyle: {
              opacity: 1,
            },
          };
          itemObj.z = 10;
        } else {
          itemObj.symbol = "none";
        }
        series.push(itemObj);
      });
      let list = [];
      this.colors.forEach((i) => {
        list.push({
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: i[0] },
            { offset: 1, color: i[1] },
          ],
          global: false,
        });
      });
      let option = {
        color: list,
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
        },
        legend: {
          show: true,
          icon: 'roundRect',
          itemWidth: 10,
          itemHeight: 10,
          data: legData,
          right: "0%",
          top: "0%",
          textStyle: { color: "#fff" },
        },
        xAxis: [
          {
            type: "category",
            data: this.xlist,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              lineStyle: { color: "#5a718b" },
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              rotate: 45,
              textStyle: {
                color: "#fff",
                fontSize: 12,
              },
            },
          },
        ],
        yAxis: [
          {
            show: true,
            type: "value",
            name: "吨/平方米",
            scale: true,
            nameTextStyle: {
              fontSize: 10,
              color: "#DFEFFF",
            },
            min: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#5a718b"],
                width: 1,
                type: "dashed",
              },
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
          },
          {
            show: true,
            type: "value",
            name: "度/平方米",
            scale: true,
            nameTextStyle: {
              fontSize: 10,
              color: "#DFEFFF",
            },
            min: 0,
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              inside: false,
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
          },
        ],
        series: series,
      };
      myChart.setOption(option, true, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#consumption {
  width: 100%;
  height: 100%;
}
</style>
